<template>
  <view
    :class="className"
    class="nav-box"
    :style="{ paddingTop: paddingTop, height: height }"
  >
    <image
      v-if="isCanBack"
      class="nav-box-back"
      :src="`${img_baseUrl}/statics/std/static/new/back.png`"
      @click="goBack"
    ></image>
    <text class="nav-box-title" :style="titleStyle">{{ titleName }}</text>
  </view>
</template>
<script>
export default {
  props: {
    /** 标题 */
    titleName: {
      type: String,
      default() {
        return "";
      },
    },
    /** 是否可以返回：不返回时隐藏按钮 */
    isCanBack: {
      type: Boolean,
      default() {
        return true;
      },
    },
    /** 背景颜色 */
    titleStyle: {
      type: Object,
    },
    /** 整体样式类 */
    className: {
      type: String,
    },
  },
  data() {
    return {
	  img_baseUrl: process.env.VUE_APP_BASEURL_IMG_API,
      paddingTop: "",
      height: "",
    };
  },
  onReady() {
    this.getMenuButtonBoundingClientRect();
  },
  methods: {
    /**
     * 获取导航栏高度
     */
    getMenuButtonBoundingClientRect() {
      let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
      this.paddingTop = menuButtonInfo.top + "px";
      this.height = menuButtonInfo.height + "px";
      console.log("getMenuButtonBoundingClientRect===", menuButtonInfo);
    },
    goBack() {
      uni.navigateBack();
    },
  },
};
</script>
<style lang="scss" scoped>
.nav-box {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  // background: #ffffff;
  display: flex;
  align-items: center;
  z-index: 9999;
  padding-bottom: 17rpx;
  .nav-box-back {
    width: 64rpx;
    height: 64rpx;
    position: absolute;
    left: 40rpx;
  }

  .nav-box-title {
    margin: auto;
    font-size: 34rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.9);
  }
}
.headerClass {
  background-color: #ffffff;
}
.headerClassBg {
  //background: linear-gradient(0deg, #c1ddff 0%, rgba(193, 221, 255, 0) 100%);
}
</style>
